<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Accordion</title>
</head>

<script src="../jquery-1.6.2.min.js" type="text/javascript"></script>
<script>

</script>
<link rel="stylesheet" href="../reset.css"/>
<style>
    body {padding: 20px;}
    .accordion { width: 300px; }
    .accordion .accorHead {background: #BEE9ED;color: #4C5D5F;cursor: pointer;background: -webkit-linear-gradient(top, #BEE9ED, #fff);}
    .accordion .accorList {border: 1px solid #98BABE;border-radius: 5px;margin-bottom: 1px;}
    .accordion .act .accorHead {color: #A2BA49;}
    .accordion .accorCont {height: 200px;color: #695D51;padding: 5px;}
    .accordionHor{width:600px;height: 300px;}
    .accordionHor .accorList{ float: left;width: 250px; position: relative; overflow: hidden; }
    .accordionHor .act .accorHead {color: #A2BA49;}

    .accordionHor .accorHead{width: 30px;height: 300px; float: left;background: #BEE9ED; cursor: pointer;}
    .accordionHor .accorCont{position: absolute; width:220px; left: 30px; top:0; height: 300px; background: #EEEFED; }
</style>
<body>
<ul class=" accordionHor clearfix">
    <li class="accorList   ">
        <h2 class="accorHead">教政策和社</h2>

        <div class="accorCont">
            自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    <li class="accorList">
        <h2 class="accorHead">人大常委会关于维</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    <li class="accorList">
        <h2 class="accorHead">守饭饭全</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
</ul>
<ul class="accordion">
    <li class="accorList">
        <h2 class="accorHead">教政策和社</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    <li class="accorList">
        <h2 class="accorHead">人大常委会关于维</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
    
    <li class="accorList">
        <h2 class="accorHead">守饭饭全</h2>

        <div class="accorCont">自觉遵守：爱国、守法、自律、真实、文明的原则
            ·尊重网上道德，遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
            ·严禁发表危害国家安全，破坏民族团结、国家宗教政策和社会稳定，含侮辱、诽谤、教唆、淫秽等内容的作品
            ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
            ·您在68design酷站所发表的评论，68design有权在网站内保留、转载、引用或者删除
            ·参与本评论即表明您已经阅读并接受上述条款
        </div>
    </li>
</ul>

<script type="text/javascript">

    function logs() {
        var s = '';
        for (var i = 0,aLen = arguments.length; i < aLen; i++) {
            s += arguments[i] + ' ';
        }
        s = s.slice(0, -1);
        if (!window.console) alert(s);
        else
            console.log(s);
    }
    /**
     * $.Accordion
     * @extends jquery.1.6.2
     * @fileOverview 手风琴
     * @author 2kid
     * @email 444212235@qq.com
     * @site 2kid.org
     * @version 1.1
     * @date 2011-08-09
     * Copyright (c) 2011-2012 2kid
     * @example
     *   $('ul').Accordion();
     */
    (function($) {

        $.fn.Accordion = function(options) {
            var opt = $.extend({}, $.fn.Accordion.settings, options);
            return this.each(function() {
                var $this = $(this);
                var accordion = new Accordion(opt);
                accordion.init($this);
            });

        }
        var Accordion = function(options) {
            this.o = options;
            this.$accordion = null;
            this.time = this.o.time;
            this.className = this.o.className;
            this.collapsible = this.o.collapsible;
            this.lastNum=this.showNum = this.o.showNum;
            this.event = this.o.event;
            this.isHor=this.o.isHor;
        }
        Accordion.prototype = {
            init:function(obj) {
                var _this=this;
                this.$accordion = obj;
                this.$accorHead = this.$accordion.find('.accorHead');
                this.$accorCont = this.$accordion.find('.accorCont');
                this.$accorList = this.$accordion.find('.accorList');
                this.$accorList.eq(this.showNum).addClass(this.className);
                this.changing=false;//正在改变

                if(this.isHor){
                    $.each(this.$accorList,function(){
                        $(this).data('width',$(this).outerWidth());
                    });
                    $.each(this.$accorHead,function(){
                        $(this).data('width',$(this).outerWidth());
                    });
                    this.$accorList.not(':eq('+this.showNum+')').width(30).data('show',false)
                    this.$accorList.eq(this.showNum).data('show',true);
                    this.$accorCont.data('show',true);
                }else{
                    this.$accorCont.hide().data('show',false)
                        .eq(this.showNum).show().data('show',true);
                }
                this.$accorHead.bind(this.event,function(){
                    if(!_this.changing){
                        _this.showNum = _this.$accorHead.index($(this));
                        if(_this.collapsible||_this.showNum!=_this.lastNum){
                            _this.changing=true;
                            _this.hideCont(_this.lastNum);
                        }

                        if(!_this.$accorCont.eq(_this.showNum).data('show')||
                                !_this.$accorList.eq(_this.showNum).data('show')){
                            _this.showCont(_this.showNum);
                        }
                    }
                });

            },
            showCont:function(showNum){
                var _this=this;
                if(this.isHor){
                     this.$accorList.eq(showNum)
                                .animate({width:this.$accorList.eq(showNum).data('width')},function(){
                                    _this.changing=false;
                                    $(this).data('show',true);
                                    _this.lastNum=_this.showNum;
                                });
                }else{
                    this.$accorCont.eq(showNum)
                                .slideDown(this.time,function(){
                                    _this.changing=false;
                                    $(this).data('show',true);
                                    _this.lastNum=_this.showNum;
                                });

                }
                this.$accorList.eq(showNum).addClass(this.className);

            },
            hideCont:function(hideNum){
                var _this=this;
                if(this.isHor){
                    this.$accorList.eq(hideNum)
                                .animate({width:this.$accorHead.eq(hideNum).data('width')},function(){
                                     $(this).data('show',false);
                                    _this.lastNum=_this.showNum;
                                    _this.changing=false;
                                });
                }else{
                    this.$accorCont.eq(hideNum).slideUp(this.time,function(){
                                    $(this).data('show',false);
                                    _this.lastNum=_this.showNum;
                                    _this.changing=false;
                                });
                }


                this.$accorList.eq(hideNum).removeClass(this.className);

            }
        }
        $.fn.Accordion.settings = {
            time:300,
            className:"",
            collapsible:false,
            showNum:0,
            isHor:false,
            event:"click"
        }
    })(jQuery);
    $('ul').eq(0).Accordion({isHor:true,collapsible:true,className:"act",event:"mouseover"});
     $('ul').eq(1).hide();
</script>
</body>
</html>
